<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="补课类型" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-radio-group v-decorator="['makeupType', {initialValue: 'suspend'}]">
        <a-radio value="suspend">为已停课程补课</a-radio>
        <a-radio value="adjust">为调课安排补课</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item 
      label="选择停课记录" 
      :labelCol="{span: 4}" 
      :wrapperCol="{span: 18}"
      v-if="form.getFieldValue('makeupType') === 'suspend'"
    >
      <a-select
        v-decorator="['suspendRecords', {rules: [{required: form.getFieldValue('makeupType') === 'suspend', message: '请选择停课记录'}]}]"
        mode="multiple"
        placeholder="请选择需要补课的停课记录"
      >
        <a-select-option v-for="record in suspendRecords" :key="record.id" :value="record.id">
          {{ record.course }} ({{ record.date }} {{ record.reason }})
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item 
      label="选择调课记录" 
      :labelCol="{span: 4}" 
      :wrapperCol="{span: 18}"
      v-if="form.getFieldValue('makeupType') === 'adjust'"
    >
      <a-select
        v-decorator="['adjustRecords', {rules: [{required: form.getFieldValue('makeupType') === 'adjust', message: '请选择调课记录'}]}]"
        mode="multiple"
        placeholder="请选择需要补课的调课记录"
      >
        <a-select-option v-for="record in adjustRecords" :key="record.id" :value="record.id">
          {{ record.course }} (原:{{ record.originalTime }} 新:{{ record.adjustedTime }})
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="补课日期" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-date-picker
        v-decorator="['makeupDate', {rules: [{required: true, message: '请选择补课日期'}]}]"
        style="width: 100%"
      />
    </a-form-item>

    <a-form-item label="补课时间" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-time-picker
        v-decorator="['makeupTime', {rules: [{required: true, message: '请选择补课时间'}]}]"
        format="HH:mm"
        style="width: 100%"
      />
    </a-form-item>

    <a-form-item label="补课教室" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-select
        v-decorator="['makeupRoom', {rules: [{required: true, message: '请选择补课教室'}]}]"
        placeholder="请选择补课教室"
        show-search
        option-filter-prop="children"
      >
        <a-select-option v-for="room in classrooms" :key="room.id" :value="room.id">
          {{ room.name }} (容量:{{ room.capacity }})
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="补课方式" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-radio-group v-decorator="['method', {initialValue: 'normal'}]">
        <a-radio value="normal">正常补课</a-radio>
        <a-radio value="merge">合并补课</a-radio>
        <a-radio value="online">线上补课</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="通知方式" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-checkbox-group v-decorator="['notifyMethods', {initialValue: ['system']}]">
        <a-checkbox value="system">系统通知</a-checkbox>
        <a-checkbox value="email">邮件通知</a-checkbox>
        <a-checkbox value="sms">短信通知</a-checkbox>
      </a-checkbox-group>
    </a-form-item>

    <a-form-item :wrapperCol="{span: 18, offset: 4}">
      <a-button type="primary" html-type="submit">提交补课</a-button>
      <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
      <a-button style="margin-left: 10px" @click="handleCheckConflict">检查冲突</a-button>
    </a-form-item>

    <conflict-check-modal
          :visible="conflictModalVisible"
          :conflicts="conflictData"
          @close="conflictModalVisible = false"
          @apply-solution="handleApplySolution"
        />
  </a-form>
</template>

<script>
import ConflictCheckModal from './ConflictCheckModal.vue'
export default {
  components: {
    ConflictCheckModal
  },
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      suspendRecords: [
        { id: '1', course: '高等数学（上）	', date: '2023-05-20', reason: '统一考试' },
        { id: '2', course: 'PLC与工业控制技术', date: '2023-05-21', reason: '学校活动' }
      ],
      adjustRecords: [
        { id: 'a1', course: '数据结构', originalTime: '周一 1-2节', adjustedTime: '周三 3-4节' },
        { id: 'a2', course: '操作系统', originalTime: '周二 5-6节', adjustedTime: '周四 7-8节' }
      ],
      classrooms: [
        { id: '1', name: 'bj007', capacity: 60 },
        { id: '2', name: 'B205', capacity: 80 },
        { id: '3', name: 'C302', capacity: 100 }
      ],
      conflictModalVisible: false,
      conflictData: {
            hasConflict: false,  // 默认值
            courseConflicts: [],
            roomConflicts: [],
            teacherConflicts: [],
            examConflicts: []
          }
    }
  },
  methods: {
	  // 新增处理解决方案的方法
	  handleApplySolution(solution) {
		console.log('应用解决方案:', solution)
		// 根据解决方案类型执行不同操作
		switch(solution.solution) {
		  case 'adjust_time':
			// 调整当前课程时间逻辑
			break
		  case 'change_room':
			// 更换教室逻辑
			break
		  // 其他case...
		}
		this.conflictModalVisible = false
	  },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('批量补课表单值: ', values)
          this.$emit('submit', values)
        }
      })
    },
    handleReset() {
      this.form.resetFields()
    },
    handleCheckConflict() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 模拟符合文档3预期的冲突数据
          this.conflictData = {
            hasConflict: true,
            courseConflicts: [
              {
                id: '1',
                courseName: '英语2101班会',
                conflictType: '时间冲突',
                conflictTime: values.makeupDate.format('YYYY-MM-DD') + ' ' + values.makeupTime.format('HH:mm'),
                conflictTarget: 'bj007'
              }
            ],
            roomConflicts: [],
            teacherConflicts: [],
            examConflicts: []
          }
          this.conflictModalVisible = true
        }
      })
    }
  }
}
</script>